<!-- 展示主页 -->
<template>
  <div class="main-container">
    <!-- 地图组件 -->
    <div class="map-box shadow radius">
      <Map />
    </div>
    <!-- 健康度排序组件 -->
    <div class="health-box shadow radius">
      <health />
    </div>
    <!-- 全息健康度组件 -->
    <div class="holographic-box shadow radius">
      <holographic />
    </div>
    <!-- 当前分层健康度组件 -->
    <div class="layerd-now-box shadow radius">
      <layerd-now />
    </div>
    <!-- 历史分层健康度组件 -->
    <div class="layerd-old-box shadow radius">
      <layerd-old />
    </div>
    <!-- 告警组件 -->
    <div class="alarm-box shadow radius">
      <alarm />
    </div>
  </div>
</template>

<script>
import Health from "@/components/Health.vue";
import Holographic from "@/components/Holographic.vue";
import LayerdNow from "@/components/LayerdNow.vue";
import LayerdOld from "@/components/LayerdOld.vue";
import Map from "@/components/Map.vue";
import Alarm from "@/components/Alarm.vue";
export default {
  components: {
    Health,
    Holographic,
    "layerd-now": LayerdNow,
    "layerd-old": LayerdOld,
    Map,
    Alarm,
  },
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
a {
  display: block;
  width: 70px;
  height: 40px;
  color: #000;
  margin-left: calc(50% - 25px);
  margin-top: 10px;
  text-decoration: none;
  background-color: #fff;
}
// 地图
.map-box {
  position: absolute;
  height: 61%;
  width: 39%;
  left: calc(50% - 250px);
  background-color: #fff;
}
// 健康度排序
.health-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 48%;
  width: 29%;
  background-color: #ccc;
}
/// 当前分层健康度
.layerd-now-box {
  position: absolute;
  top: 0;
  right: 0;
  height: 48%;
  width: 29%;
  background-color: #ccc;
}
// 历史分层健康度
.layerd-old-box {
  position: absolute;
  height: 49%;
  width: 29%;
  background-color: #ccc;
  bottom: 0;
  right: 0;
}
// 告警
.alarm-box {
  position: absolute;
  height: 49%;
  width: 29%;
  background-color: #ccc;
  bottom: 0;
}
//全息健康度
.holographic-box {
  position: absolute;
  height: 36%;
  width: 39%;
  bottom: 0;
  left: calc(50% - 250px);
  background-color: #fff;
}
</style>